// 定义几种颜色
@navBgColor: #f9f9f9;
@color: #5d4484;
//定义工具方法
.hlh(@h) {
  height: @h;
  line-height: @h;
}
// .wcenter(120px) => width: 120px; margin: 0 auto 0;
.wcenter(@w, @mt: 0, @mb: 0) {
  width: @w;
  margin: @mt auto @mb;
}
.cricleBorder(@bs, @b) {
  border-radius: @bs;
  border: @b;
}
// 定义默认字体
body {
  font-family: e('-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif');
}


// 修改导航样式
.header{
  margin-bottom: 0;
  a{
    color: @color;
    cursor: pointer;
  }
  ul li a:hover,
  ul li a.choose {
    background: @navBgColor;
  }
}

//首页
.home{
  .banner{
    padding: 60px 0 80px;
    background: @color;
    color:#ffffff;
    text-align: center;
    .logo{
      .wcenter(150px);
      .hlh(150px);
      .cricleBorder(20px,1px solid #fff);
      font-size: 100px;
    }
    h1{
      .wcenter(800px, 30px);
      font-size: 30px;
      line-height: 50px;
    }
    .btn{
      .cricleBorder(6px,1px solid #fff);
      padding: 12px 32px;
      font-size: 24px;
      margin-top: 30px;
      &:hover{
        background: #ffffff;
        color: @color;
      }
    }
    p{
      margin-top: 30px;
      color: lighten(@color,30%);
    }
  }
  .first-list {
    padding-top: 100px;
    text-align: center;
    color: #666;
    font-size: 22px;
    border-bottom: 1px solid #ccc;
    h1 {
      font-size: 40px;
      color: #000;
    }
    .line {
      .wcenter(100px, 50px, 50px);
      border-bottom: 1px solid #ccc;
    }
    p {
      .wcenter(900px);
    }
    ul {
      li {
        list-style: none;
        padding: 0;
        width: 33.33333333%;
        float: left;
      }
      img {
        width: 90%;
      }
      h3 {
        font-size: 26px;
        color: #000;
      }
      p {
        .wcenter(90%);
        font-size: 14px;
      }
    }
    .btn {
      color: @color;
      border: 1px solid @color;
      margin: 50px auto 120px;
      &:hover {
        color: #fff;
        background: @color;
      }
    }
  }
  // 第二个列表的样式复用第一个
  .second-list{
    .first-list;
    // 重写一些样式
  ul{
    li{
      width: 25%;
      border-right: 1px solid transparent;
      box-sizing: border-box;
    }
    img{
      width: 100%;
    }
    li:last-child{
      border-right: none;
    }
  }
  }
}

//定义内容页样式
.page{
  .banner{
    background: @color;
    padding: 60px 0;
    text-align: left;
    h1{
      color:#ffffff;
      font-size: 60px;
    }
    p{
      color: lighten(@color,30%);
      width: 760px;
      font-size: 24px;
    }
    margin-bottom: 40px;
  }
  li{
    list-style: none;
  }
  .article{

    width: 800px;
    float: left;
    h3{
      font-size: 40px;
      line-height: 80px;
      border-bottom: 1px solid #cccccc;
      margin-bottom: 30px;
    }
    p{
      font-size: 22px;
      line-height: 36px;
      margin-bottom: 40px;
      margin-bottom: 60px;
    }
  }
  .aside{
    padding-top: 50px;
    margin-left: 850px;
    li{
      font-size: 14px;
      line-height: 30px;
      border-left: 1px solid transparent;
      padding-left: 25px;
      &:hover{
        border-left: 1px solid @color;
        color: @color;
      }
      a{
        color: #666;
        &:hover{
          text-decoration: none;
        }

      }
    }
  }
}